<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--{include file='comm/header.tpl'}-->
    <title><!--{$company_short_name}-->电商平台</title>
    <style type="text/css">

        ._tb_box{
            padding: 5px 0px;
            float: left;
            width: 9999999px;
            position: absolute;
        }
        ._tb_box .btn{
            width: 100px;
        }
        ._tb_box div{
            width: 100px;
            height: 30px;
            position: relative;
            float: left;
            margin: 0px 2px;;
        }
        ._tb_box div a{
            position: absolute;
            left: 0px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        ._tb_box div em{
            position: absolute;
            width: 18px;
            height: 30px;
            line-height: 30px;
            right: 2px;
            top: 0px;
            cursor: pointer;
        }
        ._tb_box div em .close{
            font-size: 18px;
            margin-top:6px;
        }
        .left_move,.right_move{
            width: 15px;
            padding: 0px 2px;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
        }
        .left_move{
            position: absolute;
            left: 0px;;
        }
        .right_move{
            position: absolute;
            left: 1165px;
            top: 7px;
        }

    </style>
</head>

<body style="overflow-y: hidden;">

<!--{include file='comm/naviBanner.tpl'}-->
<div class="container">

    <!--{include file='comm/menu.tpl'}-->

    <div  id="right_box">
        
        <div class="comm_crub" style="background:#fff;width: 100%;display: block; padding:2px 8px;height:auto;overflow: hidden;position: relative">
            <a href="javascript:void(0)" class="left_move" style="">《</a>
            <div class="tb_box" style="overflow: hidden;width: 100%; display: block;position: relative;height: 40px;margin-left: 10px;">
                <div class="_tb_box"></div>
            </div>
            <a href="javascript:void(0)" class="right_move" style="top: 2px">》</a>
        </div>
        
        <div id="frame_box">
        </div>

    </div>

</div>
<script>

</script>

<script type="text/javascript">

    //浏览器页面调整
    screen_init();

    //初始化菜单
    get_menu();

    //初始标签偏移量
    var init_tag = 0;

    $(document).on('click', '#left div.subnav-title', function(){
        var c = $(this);
        c.next("ul.subnav-menu").slideToggle(300);
        var d = c.parent().siblings();

        if($(this).find('.toggle-subnav i').hasClass('active')){
            $(this).find('.toggle-subnav i').removeClass('active');
        }else{
            $('.subnav .subnav-title .toggle-subnav i').removeClass('active');
            $(this).find('.toggle-subnav i').addClass('active').siblings().removeClass('active');
        }

        if (c.hasClass("first-subnav")) {
            $("#left div.first-subnav").removeClass("cur");
            $("#left").find("li").removeClass("isurl");
        }else{
            if (c.hasClass("second-subnav")) {
                $("#left div.second-subnav").removeClass("cur");
                $("#left").find("li").removeClass("isurl");
                if (c.next(".subnav-menu").length < 1) {
                    c.addClass("cur");
                }
            }
        }
        $(".subnav-menu a").click(function(){
            if (!$(this).parent().hasClass("second-subnav")) {
                $("#left").find("li").removeClass("isurl");
                $("ul.main-nav li").eq(0).addClass("isurl").siblings().removeClass("isurl");
                $(this).parent().addClass("isurl").siblings().removeClass("isurl");
            }
        });


        d.children("ul.subnav-menu").slideUp("slow");
        setTimeout(function() {
                    $("#left").getNiceScroll().resize()
                },
                300)
    });

    var tm_li = E.getCookie('data-li');
    $("#left .second-subnav.cur").css('background-color',tm_li);




    $(function(){

        //左侧导航按钮事件
        $(document).on('click', '.menu_tb_a', function(){

            var h = $(this).attr('url');
            var t = $.trim($(this).text().replace('-',''));
            var id = $(this).attr('permission_id');

            createTbButton(h,t,id);
        });

        //历史页面选择
        $(document).on('click','._tb_box a',function(){

            var thisIndex = $(this).parent('div').index();

            $('._tb_box').find('a').removeClass('active');
            $(this).addClass('active');

            $("#frame_box").find("iframe").hide();
            $("#frame_box").find("iframe").eq(thisIndex).show();
        });

        //历史页面删除
        $(document).on('click','._tb_box em',function(){

            var outIndex = $(this).parent('div').index();

            if($(this).siblings('a').hasClass('active')){

                var index;

                if($(this).parent('div').prev().find('a').attr('url')){
                    index = $(this).parent('div').prev().index();
                }else if($(this).parent('div').next().find('a').attr('url')){
                    index = $(this).parent('div').next().index();
                }

                $("#frame_box").find('iframe').hide();
                $('._tb_box').find('a').eq(index).addClass('active');
                $("#frame_box").find('iframe').eq(index).show();

            }

            $(this).parent('div').remove();
            $("#frame_box").find('iframe').eq(outIndex).remove();

            var _tb_box = $("._tb_box");
            var tagW = $('._tb_box div').width()+4;
            var tagLen = $('._tb_box div').length;
            var p = Math.ceil(parseInt( $(".tb_box").width())/tagW);

            if(init_tag <= p){
                if((tagLen+1) <= p){
                    init_tag--;
                }
            }else if(init_tag > p){
                if(init_tag < (tagLen+1)){

                }else if(init_tag == (tagLen+1)){
                    $('._tb_box').animate({left:'+='+tagW},'slow');
                    init_tag--;
                }
            }

        });

        $(".right_move").click(function(){

            var _tb_box = $("._tb_box");
            var tagW = $('._tb_box div').width()+4;
            var tagLen = $('._tb_box div').length;
            var p = Math.ceil(parseInt( $(".tb_box").width())/tagW);

            if(!_tb_box.is(":animated")){

                if(tagLen > init_tag){

                    $('._tb_box').animate({left:'-='+tagW},'slow');
                    init_tag++;

                }
            }

        });

        $(".left_move").click(function(){

            var _tb_box = $("._tb_box");
            var tagW = $('._tb_box div').width()+4;
            var tagLen = $('._tb_box div').length;
            var p = Math.ceil(parseInt( $(".tb_box").width())/tagW);

            if(!_tb_box.is(":animated")){

                if(p < init_tag){

                    $('._tb_box').animate({left:'+='+tagW},'slow');
                    init_tag--;

                }

            }

        });

    });



    /**
     * 历史标签按钮创建函数
     * @param h
     * @param t
     */
    function createTbButton(h,t,id){

        $('._tb_box').find('a').removeClass('active');
        $('#frame_box').find('iframe').hide();

        var a_len = $('._tb_box').find('a').length;
        var s = 1;

        for(var i=0; i<a_len; i++){
            var _h = $('._tb_box').find('a').eq(i).attr('url');
            if(h == _h){
                //标签状态
                $('._tb_box').find('a').eq(i).addClass('active');
                $('#frame_box').find('iframe').eq(i).show();
                s = 0;
            }
        }

        if(s == 1){
            var html = '<div><a href="javascript:void(0)" url="'+ h +'" class="btn btn-default btn-sm" role="button" title="'+ t +'">'
            html += t;
            html += '</a>';
            html += '<em><button type="button" class="close" data-dismiss="alert">';
            html += '<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>';
            html += '</button></em>';
            html += '</div>';

            $('._tb_box').append(html);
            $('._tb_box').find('a').eq(a_len).addClass('active');

            var html2 = '<iframe frameborder="0" id="frame_'+ id +'" name="frame_'+ id +'" url="'+ h +'" src="'+ h +'" style="height: 100%;width:100%;"></iframe>';

            $('#frame_box').append(html2);

            count_tag();

        }


    }

    /**
     * 增加标签时重置标签位置
     */
    function count_tag(){

        var tagLen = $('._tb_box div').length;
        var tagW = $('._tb_box div').width()+4;
        var boxW = $('.tb_box').width();

        init_tag++;

        if(boxW/tagW < tagLen){
            var c = tagLen - boxW/tagW;
            $('._tb_box').animate({left:'-'+(c*tagW)},'slow');
            init_tag = tagLen;
        }

    }

    /**
     * 异步获取菜单
     */
    function get_menu(){

        E.loadding.open('正在加载菜单，请稍候...');
        E.ajax_get({
            url: '/invokingAjax-backend/system/menu.ajax?operFlg=1',
            call:function(o){

                E.loadding.close();
                $("#left").html(o);

                $('.subnav .subnav-menu li:last-child').css('border-bottom','0');

                $(document).on("click","#left_close",function(){
                    $(this).addClass("open");
                    $("body").addClass("big-page");
                });

                $(document).on("click","#left_close.open",function(){
                	$(this).removeClass("open");
                    $("body").removeClass("big-page");
                });

               if($(".h_left").width()==10) {

                   $(".nleft").width(0);
                   $("#left_close").addClass("closes");
               }


            }

        });

    }

    function screen_init(){
        var scroll_obj = E.scroll();
        var right_box_length = scroll_obj.height - 45;
        var frame_box_length = right_box_length - 35;
        $('#right_box').css('height', right_box_length + 'px');
        $('#frame_box').css('height', frame_box_length + 'px');
    }

</script>

</body>
</html>